<template lang="html">

  <div class="car">
    <v-header/>
    <!-- 根据购物车是否有商品加载不同的组件 -->
    <div v-if='carList'>
      <ul class="something">
        <li v-for="(item,index) in carList">
          <div class="something-middle">
            <img :src="item.image">
          </div>
          <div class="something-right">
            <p>{{ item.storeName }}</p>

            <div class="numberBox">
              <i @click="reduce(item)">-</i>
              <p>{{ item.goodNum }}</p>
              <i @click="add(item)">+</i>
            </div>

            <p>小计: {{ item.totalPrice.toFixed(2) }}元 茶籽: {{ item.totalTeaSeedNum.toFixed(2) }}粒</p>
            <div class="something-right-bottom" @click="cut(item)">
              <span></span>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <is-empty v-else></is-empty>

    <v-footer :totalPrice="totalPrice" :totalTeaSeedNum="totalTeaSeedNum" @goPay="goPay"/>
    <bottomBar></bottomBar>
  </div>
</template>

<script>
import Header from '@/components/index/header.vue'
import Footer from '@/components/car/footer.vue'
import {goodCatList, goodDeleteCat, goodBuy, goodUpdateCat} from '@/http/api'
import bottomBar from '@/common/_footer.vue'
import isEmpty from '@/components/isEmpty'

export default {
  components: {
    'v-header': Header,
    'v-footer': Footer,
    bottomBar,
    isEmpty
  },
  data() {
    return {
      count: false,
      carList: [],
      totalPrice: 0,
      totalTeaSeedNum: 0
    }
  },
  mounted() {
    // 防止刷新页面数据为空
    this.getList()
  },
  methods: {
    async getList() {
      const user = JSON.parse(localStorage.getItem('UserMessage'))
      const params = {uid: user.user.uid}
      const res = await goodCatList(params)
      if (res.code * 1 === 200) {
        this.totalPrice = res.data.totalMoney
        this.totalTeaSeedNum = res.data.totalTeaSeedNum
        if (res.data.list.length * 1 > 0) {
          this.count = true
        } else {
          this.count = false
        }
        this.carList = res.data.list
      }
    },
    async cut(item) {
      const user = JSON.parse(localStorage.getItem('UserMessage'))
      console.log(item)
      const params = {
        id: item.id
      }
      const res = await goodDeleteCat(params)
      if (res.code * 1 === 200) {
        this.getList()
      }
    },
    async goPay() {
      const user = JSON.parse(localStorage.getItem('UserMessage'))
      let catIds = []
      this.carList.forEach(item => {
        catIds.push(item.id)
      })
      const params = {
        uid: user.user.uid,
        catIds: catIds
      }
      const res = await goodBuy(params)
      if (res.code * 1 === 200) {
        // this.getList()
        this.$router.push({
          path: '/order',
          query: {
            paid: 0,
            status: 0
          }
        })
      }
    },
    async reduce(item) {
      if (item.goodNum * 1 <= 1) {
        return
      }
      const data = {
        ...item,
        goodNum: item.goodNum - 1
      }
      const res = await goodUpdateCat(data)
      if (res.code * 1 === 200) {
        this.getList()
      }
    },
    async add(item) {
      const data = {
        ...item,
        goodNum: item.goodNum + 1
      }
      const res = await goodUpdateCat(data)
      if (res.code * 1 === 200) {
        this.getList()
      }
    }
  }

}
</script>

<style lang="less" scoped>
@import "../assets/fz.less";

.car {
  width: 100%;
  padding-bottom: 140px;
  height: 100%;
  background-color: #f5f5f5;
}

.something {
  width: 100%;

  > li {
    display: -ms-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 4vw 2vw;
    position: relative;
    height: 26vw;
    margin-bottom: 10px;
    .bd();

    .something-left {
      -ms-flex: 2;
      -webkit-box-flex: 2;
      flex: 2;

      label {
        float: left;
        background: url("../assets/car/images/t.svg") no-repeat center
          center/50% 50%;

        input {
          height: 14vw;
          width: 14vw;
          opacity: 0;
          filter: alpha(opacity=0);
        }
      }

      .false {
        background: url("../assets/car/images/f.svg") no-repeat center
          center / 50% 50% !important;
      }
    }

    .something-middle {
      -ms-flex: 3;
      -webkit-box-flex: 3;
      flex: 3;
      height: 26vw;
      padding-left: 2vw;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;

      img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }

    .something-right {
      -ms-flex: 7;
      -webkit-box-flex: 7;
      flex: 7;
      height: 100%;
      display: -ms-flex;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-flow: column wrap;
      flex-flow: column wrap;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      padding-left: 6vw;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;

      p {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        margin-top: 6px;
        -webkit-box-orient: vertical;
        .fz(font-size, 26);
      }

      p:last-of-type {
        .fz(font-size, 22);
        color: rgb(168, 168, 168);
      }

      .something-right-bottom {
        > div {
          display: -ms-flex;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;

          input {
            width: 6vw;
            text-align: center;
          }

          span {
            height: 7vw;
            line-height: 7vw;
            width: 8vw;
            display: inline-block;
            border: 0.2vw solid #f1f1f1;
            border-radius: 1vw;
            text-align: center;
            font-size: 20px;
            cursor: pointer;
          }
        }

        > span {
          position: absolute;
          right: 0;
          bottom: 0;
          width: 13vw;
          height: 13vw;
          background: url("../assets/car/images/laji.svg") no-repeat
            center/50%;
        }
      }
    }
  }
}

.numberBox {
  width: 100px;
  line-height: 20px;
  margin-top: 10px;
  vertical-align: middle;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  text-align: center;

  i {
    width: 20px;
    height: 20px;
    line-height: 20px;
    background: #048AB9;
    color: white;
    border-radius: 50%;
    align-self: center;
  }

  input {
    width: 60px;
    line-height: 20px;
    border: 0;
    font-size: 12px;
  }
}
</style>
